<template>
	<view class="body">
		<view class="refund-header">
			<image src="../../../static/images/refund-money.png"></image>
			<view class="refund-prompt">
				<text class="refund-status">{{ afterSale.after_sale_status }}</text>
				<text class="refund-time">{{ time }}</text>
			</view>
		</view>
		<view class="refund-money">
			<text class="refund-text">退款总金额</text>
			<text class="money">￥{{ afterSale.refundAmount }}</text>
		</view>
		<view class="product">
			<image :src="afterSale.goodImg"></image>
			<view class="product-info">
				<text class="product-name">{{ afterSale.goodName }}</text>
				<!--<text class="product-num">规格？</text>-->
			</view>
			<view class="product-price-num">
				<text class="product-price">￥{{ afterSale.refundAmount/afterSale.num }}</text>
				<text class="num">x{{ afterSale.num }}</text>
			</view>
		</view>
		<view class="refund-info">
			<text>退款原因：{{ afterSale.reason }}</text>
			<text>退款金额：￥{{ afterSale.refundAmount }}</text>
			<text>申请时间：{{ time }}</text>
			<text>退款编号：{{ afterSale.afterNo }}</text>
		</view>
		<view class="bottom">
			<text @click="againApplyRefund">再次申请</text>
		</view>
		<view class="money_return">
			<popupMoney :refund-reason="refundReason" :show="type === 'money'" position="bottom" mode="fixed"  @hidePopup="hidePopup" :mony="listItems" @refundReason="toRefund"></popupMoney>
		</view>
	</view>
</template>

<script>
	import popupMoney from '@/components/uni-popupMoney/uni-popupMoney.vue'
	export default {
		components: {
			popupMoney
		},
		data() {
			return {
				afterSale: {},
				time: '',
				refundReason: [],
				type: '',
				reason: '',
				afterNo: '',
				listItems: [],
			}
		},
		onLoad(option){
			let self = this;
			console.log(option);
			this.afterNo = option.afterNo;
			uni.request({
				url: this.$store.state.URL+'order/after_sale/after_sale_details',
				data: {
					token: this.$store.state.token,
					afterNo: option.afterNo,
				},
				success(res) {
					console.log(res.data);
					self.afterSale = res.data.data.after_sale;
					self.time = self.formatDate(self.afterSale.createTime);
				},
				fail(e) {
					console.log(e);
				}
			})
		},
		methods: {
			againApplyRefund(){  //退款
			    let self = this;
			    uni.request({
					url: this.$store.state.URL+'order/after_sale/get_after_apply_info',
					method: 'GET',
					data: {
						token: this.$store.state.token,
						after_no: this.afterNo,
					},
					success(res) {
						console.log(res.data);
						if(res.data.status){
							let order = res.data.data.order;
							let goods = order.goods;
							if(res.data.data.type == 'salesReturn'){
								self.refundReason = res.data.data.reason;
							}
							self.type = 'money';
							console.log(self.type);
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none',
							})
						}
					},
					fail(e) {
						console.log(e);
					}
				});
			},
			toRefund(reason){  //退款
			    this.reason = reason;
			    let self = this;
			    uni.request({
			    	url: this.$store.state.URL+'order/after_sale/after_apply',
			    	data: {
			    		token: this.$store.state.token,
			    		after_no: this.afterNo,
			    		afterReason: '',
			    		caption: '',
			    		reason: this.reason,
			    		num: this.afterSale.num,
						type: 'refund',
			    	},
			    	success(res) {
			    		console.log(res.data);
			    		if(res.data.status){
							uni.showToast({
								title: '申请成功',
								duration: 2000,
							})
			    			uni.navigateTo({
			    				url:"../../afterSaleStatus/refundProcessing/refundProcessing?afterNo="+self.afterNo
			    			})
			    		}
			    	},
			    	fail(e) {
			    		console.log(e);
			    	}
			    })	
			},
			formatDate(now) {
				var time = new Date(now);
			    var year = time.getFullYear(); 
				var month = time.getMonth()+1; 
				var date = time.getDate(); 
				var hour = time.getHours(); 
				var minute = time.getMinutes(); 
				var second = time.getSeconds(); 
				return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
			},
		    hidePopup(confirm) { //退款原因弹窗
			    if(confirm){
					this.toRefund();
				}
				this.type = null;
			},
		}
	}
</script>

<style scoped>
	page{
		background-color: #F5F5F5;
	}
	.body{
		padding-bottom: 96upx;
	}
	.refund-header{
		display: flex;
		width: 750upx;
		height: 150upx;
	}
	.refund-header image{
		display: block;
		width: 250upx;
		height: 150upx;
	}
	.refund-prompt{
		width: 500upx;
		height: 150upx;
		background-color: #f2526f;
	}
	.refund-status,.refund-time{
		display: block;
		color: #FFFFFF;
		
	}
	.refund-status{
		font-size: 30upx;
		margin-top: 28upx;
	}
	.refund-time{
		font-size: 20upx;
		margin-top: 16upx;
	}
	.refund-money{
		display: flex;
		width: 750upx;
		height: 90upx;
		font-size: 32upx;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20upx;
		background-color: #FFFFFF;
	}
	.refund-text,.money{
		line-height: 90upx;
	}
	.product{
		display: flex;
		width: 750upx;
		height: 210upx;
		box-sizing: border-box;
		padding: 30upx 16upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
	}
	.product image{
		width: 200upx;
		height: 150upx;
	}
	.product-info{
		width: 345upx;
		height: 150upx;
		box-sizing: border-box;
		padding-left: 20upx;
	}
	.product-info text{
		display: block;
	}
	.product-name,.product-price{
		font-size: 30upx;
	}
	.product-num{
		margin-top: 60upx;
	}
	.product-num,.num{
		font-size: 26upx;
		color: #a0a0a0;
	}
	.product-price-num{
		width: 173upx;
		height: 150upx;
	}
	.product-price-num text{
		display: block;
		text-align: right;
	}
	.refund-info{
		box-sizing: border-box;
		padding: 20upx;
		margin-top: 20upx;
		background-color: #FFFFFF;
	}
	.refund-info text{
		display: block;
		font-size: 30upx;
		line-height: 56upx;
	}
	.bottom{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		height: 96upx;
		box-sizing: border-box;
		padding-right: 15upx;
		background-color: #FFFFFF;
		box-shadow: 0 -2upx 1upx #efefef;
	}
	.bottom text{
		display: inline-block;
		width: 160upx;
		height: 50upx;
		font-size: 30upx;
		padding: 0;
		border: 1upx solid #f2526f;
		color: #f2526f;
		border-radius: 25upx;
		line-height: 50upx;
		text-align: center;
		background-color: #FFFFFF;
	}
</style>